<template>
    <div class=" ">
        <div>
           <Item />
        </div>
        <div class="flex w-[33%] bg-[#1B1B1B] p-[20px] rounded-[10px] border-[1px] border-[#2B2B2B] ml-[10px] mr-[10px]"
            v-for="(item, index) in realList">
            <div class="mt-[10px] mb-[10px]">
                <span class="mr-[26px] text-[16px] text-[#fff]">样品{{ item.analysis_project }}</span>
                <!-- <span class="mr-[26px] text-[16px] text-[#fff]">CF4精品</span> -->
                <div class="realList" v-for="(item2) in realList[index].values">
                    <div class="flex justify-between  mt-[20px]">
                        <span class="mr-[26px] text-[16px] text-[#fff]">取样点{{ item2.sampling_pt }}</span>
                        <span class="mr-[26px] text-[16px] text-[#fff]">取样时间{{
                            dayjs(item2.sampling_time).format('YYYY-MM-DD HH:mm') }}</span>
                    </div>

                    <a-table id="tableRef" :scroll="{ x: 500 }" ref="tableRef" :loading="loading" class
                        :pagination="false" :columns="getTableColumns(item2.components)"
                        :data-source="getTableData(item2)" style="background-color: #1b1b1b; line-height: 10px;">
                    </a-table>
                </div>
            </div>
        </div>

    </div>
</template>
<script setup lang="ts">
import { apiGetAnalysisRealtime } from '@/http/api';
// import dayjs, { Dayjs } from 'dayjs';
import dayjs from 'dayjs';
import Item from './Item.vue'
import { onBeforeMount, ref } from 'vue';

// import { default_columns } from './columns';
const date = ref<any>([dayjs().subtract(6, 'day'), dayjs()]);
// const lineChartsRef = ref();

const columns: any = ref([]);
const tableData = ref<any[]>([]);
const loading = ref(false);
const ip = ref('');
const port = ref('');
const route = useRoute();
// const times = ref<string[]>([]);
const realList = ref([]);   // 展示数据列表

const getData = async () => {
    // tableData.value = [];
    // times.value = [];
    // columns.value = [];
    const res = {
        "analysis_project": "CF4粗品",
        "values": [
            {
                "sampling_pt": "精馏塔",
                "sampling_time": 1732156746,
                "status": "normal",
                "components": {
                    "O2": 10.02,
                    "Ar": 6
                }
            }
        ]
    };
    try {
        loading.value = true;
        // const resp = await apiGetAnalysisRealtime();
        // console.log('resp', resp);
        realList.value = resp.data;
        console.log('realList.value ', realList.value);
    } catch (error) {

    } finally {
        loading.value = false;
    }
};

defineExpose({
    refresh: getData,
});
const queryData = async () => {
    getData();
};
onBeforeMount(() => {
    const data = route.query;
    if (data) {
        ip.value = data.ip! as string;
        port.value = data.port! as string;
    }
    queryData();
});
// 处理把返回值 表格列
const getTableColumns = (components: Record<string, number>) => {
    const columns: Array<{ title: string; dataIndex: string; key: string }> = [];
    const componentKeys = Object.keys(components);
    componentKeys.forEach(key => {
        columns.push({
            title: key,
            dataIndex: key,
            key: key
        });
    });
    return columns;
};
// 处理表格数据
const getTableData = (item2: { sampling_time: number; components: Record<string, number> }) => {
    const row = {
        key: 1,
        ...item2.components
    };
    return [row];
};
</script>
<style lang="scss" scoped></style>
